<template>
    <div>
        <el-dropdown class="avatar-container" trigger="click" placement="bottom">

            <div class="avatar-wrapper">
                <el-avatar shape="square" :size="40" :src="$store.getters.getUserInfo.avatar"></el-avatar><i class="el-icon-s-tools"></i>
            </div>
            <template #dropdown>
                <el-dropdown-menu slot="user-dropdown">
                    <router-link to="/">
                        <el-dropdown-item>首页</el-dropdown-item>
                    </router-link>
                    <a target="_blank" href="">
                        <el-dropdown-item>课程主页</el-dropdown-item>
                    </a>
                    <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script>
// import {userStore} from 'vuex'
export default {
  name: "EventIndex",
  data() {
    return {
    };
  },
  mounted() {
    //   const store = user()
    //   console.log(this.$store);
    //   console.log(localStorage);
  },

  methods: {
      logout(){
        localStorage.removeItem("token")
        location.reload(true);
        // store.dispatch('user/logout');
        // location.reload('true');
      }
  }
};
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  .right-menu {
    display: flex;
    align-items: center;
    float: right;
    padding-right: 16px;
    ::v-deep .avatar-container {
      cursor: pointer;
      .avatar-warpper {
        margin-top: 5px;
        position: relative;
        .el-avatar {
          --el-avatar-background-color: none;
          margin-right: 12px;
          color: #fff;
        }
      }
    }
  }
}
</style>